<template>
	<view class="login-box">
		<view class="new_bg">
			<view class="tip_box">授权提醒</view>
			<view class="content_box">
				请授权头像等信息，以便为您提供更好的服务
			</view>
			<!-- #ifdef MP -->
			<button v-if="isShow" open-type="getUserInfo" class="new-confirm-btn" @getuserinfo="showAuthModal"
				hover-class="hoverBtn">立即授权</button>
			<!-- #endif -->
			<button class="new-close-btn" @click="cancelAuth" hover-class="hoverBtn">再想想</button>
			<view class="agree">
				<view class="text_box">
					<checkbox @click="isShow = !isShow" color="#f60f1b" style="transform:scale(0.7)"
						class="tick_icon_box" value="cb" :checked="iconShow" />
					<text style="color: #999999">授权即表示同意</text>
					<text class="fontColor-primary" @click="navTo('1')">《隐私保护政策》</text>
					<text class="fontColor-primary" @click="navTo('2')">《用户登录协议》</text>
				</view>
			</view>
		</view>
		<w-popup :show="showtip" :type="types" @change="change">
			<view class="w-tip">
				<view class="w-box">
					<view class="tishi">为了提供更好的服务，请您绑定身份证号码！</view>
					<view class="input-row">
						<view class="icon-size icons icon-credentials_icon"></view>
						<input class="input-pho" type="string" placeholder-style="color:#ddd" v-model="userInfos.identity"
							placeholder="请输入新的身份证号码" :focus="true"></input>
					</view>
				</view>

				<view class="input-but">
					<view class="input-but-l" @click="cancel('tip')">取消</view>
					<view class="input-but-r" @click="confirm(userInfos)">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import store from '@/store'
	//import { editUserInfo, userLogin } from '../../common/api.js';
	import {
		userLogin,
		decrypt_datas,
		insertopenids,
		getuserinfos, //用户信息
		bindUserIdentitys //绑定身份证
	} from '../../common/api.js';
	import api from '@/common/util.js'
	import {
		mapState,
		mapMutations
	} from "vuex";
	var app = require('@/common/common.js'); //引入公共方法
	import wPopup from '@/components/w-popup/w-popup.vue'
	export default {
		components: {
			wPopup
		},
		data() {
			return {
				isShow: true,
				user: '',
				iconShow: true,
				type: '',
				item: '',
				showtip: false,
				content: '顶部弹 popup',
				types: '', //弹窗显示方式
				userInfos: {
					user_name: '',
					province: '',
					city: '',
					country: '',
					headimgurl: '',
					openid: '',
					session_key: '',
					identity: ''
				},
			}
		},
		onLoad(option) {
			console.log(222, option)
			this.type = option.type;
			if (option.data) {
				let item = JSON.parse(option.data);
				this.item = item;
			}
			this.user = option.from || ''
		},
		computed: {
			...mapState(['share_id', 'openid', 'agent_id', 'userInfo']),
		},
		methods: {
			...mapMutations(['setLogin', 'setloginStatus', 'setUserInfo', 'login']),
			change(e) {
				if (!e.show) {
					this.showtip = false;
				}
			},
			//确认
			confirm(row) {
				let _self = this;
				if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(row.identity)) {
					uni.showToast({
						title: '请输入正确的身份证号码！',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				bindUserIdentitys(row).then(res => {
					if (res.code === 2000) {
						//设置缓存
						_self.setUserInfo({
							identity: row.identity,
						});
						uni.setStorageSync('userInfo', _self.userInfos);
						//跳转页面
						uni.reLaunch({
							url: `/pages/user/index`
						})
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			//取消
			cancel(type) {
				let _self = this;
				this['show' + type] = false;
				if (_self.user === 'user') {
					// 登录成功后跳转的地址
					uni.switchTab({
						url: '/pages/user/index'
					});
				} else {
					// 登录成功后跳转的地址
					uni.navigateTo({
						url: '/pages/index/race_detail?from=index&type=' + _self.type + '&data=' + JSON.stringify(
							_self.item)
					})
				}
			},
			unAuthModal() {
				uni.showToast({
					title: '请阅读相关协议',
					duration: 2000,
					icon: "none"
				})
			},
			// 授权判断
			showAuthModal(res) {
				//#ifdef H5
				this.login();
				//#endif
				//#ifdef MP
				if (res.detail.iv) {
					// store.commit('login',openid); // 如果授权，就将openid 存起来，否则不存
					let info = {};
					const {
						nickName,
						avatarUrl,
						city,
						province,
						country
					} = res.detail.userInfo;
					info.user_name = nickName;
					info.headimgurl = avatarUrl;
					info.city = city;
					info.province = province;
					info.country = country;
					this.setUserInfo({
						user_name: info.user_name,
						province: info.province,
						city: info.city,
						country: info.country,
						headimgurl: info.headimgurl
					});
					uni.setStorageSync('userInfo', info);
					const _self = this;
					// #ifdef MP-WEIXIN
					if (app.is_iOS()) {
						//iOS的方法
						uni.login({
							provider: 'apple',
							success(loginRes) {
								console.log('登陆成功', loginRes)
								const {
									code
								} = loginRes
								console.log(code, res.detail.encryptedData, res.detail.iv)
								userLogin({
									code
								}).then(({
									data
								}) => {
									const {
										openid
									} = data;
									console.log('openid',openid);
									//赋值
									_self.userInfos.openid = openid;
									_self.userInfos.session_key = data.session_key;

									_self.setLogin(openid)
									uni.setStorageSync('super_token', openid);
									_self.setloginStatus(true)
									uni.getUserInfo({
										provider: 'apple', //iOS的方法
										success: function(resdata) {
											//赋值
											_self.userInfos.user_name = resdata.userInfo.nickName
											_self.userInfos.headimgurl = resdata.userInfo.avatarUrl
											
											resdata.userInfo.openid = data.openid;
											insertopenids({
												data: JSON.stringify(resdata.userInfo)
											}).then(res3 => {
											
												if (res3.code === 2000) {
													//判断用户是否绑定过手机
													getuserinfos({
														openid: resdata.userInfo.openid
													}).then(result => {
														if (result.code === 2000) {
															//赋值
															_self.userInfos.identity = result.data.identity;
															if(result.data.identity_init === 1){
																//打开弹窗
																_self.content = 'center'
																_self.types = 'center';
																_self.showtip = true;
															}else{
															
																//设置缓存
																_self.setUserInfo({
																	user_name: _self.userInfos.user_name,
																	province: _self.userInfos.province,
																	city: _self.userInfos.city,
																	country: _self.userInfos.country,
																	headimgurl: _self.userInfos.headimgurl,
																	openid: _self.userInfos.openid,
																	session_key: _self.userInfos.session_key,
																	identity: _self.userInfos.identity,
																});
																uni.setStorageSync('userInfo', _self.userInfos);
																//跳转页面
																uni.reLaunch({
																	url: `/pages/user/index`
																})
																uni.showToast({
																	title: res.msg,
																	duration: 2000,
																	icon: "none"
																});
																
															}
														}
													})

												}
											})
										}
									})
								})
							},
							fail(e) {
								console.log('errer->', e)
							}
						});
					} else {
						uni.login({
							provider: 'weixin',
							success(loginRes) {
								console.log('登陆成功', loginRes)
								const {
									code
								} = loginRes
								console.log(code, res.detail.encryptedData, res.detail.iv)
								userLogin({
									code
								}).then(({
									data
								}) => {
									const {
										openid
									} = data;
									console.log('openid',openid);
									//赋值
									_self.userInfos.openid = openid;
									_self.userInfos.session_key = data.session_key;
									
									_self.setLogin(openid)
									uni.setStorageSync('super_token', openid);
									_self.setloginStatus(true)
									uni.getUserInfo({
										provider: 'weixin',
										success: function(resdata) {
											//赋值
											_self.userInfos.user_name = resdata.userInfo.nickName
											_self.userInfos.headimgurl = resdata.userInfo.avatarUrl
											
											resdata.userInfo.openid = data.openid;
											insertopenids({
												data: JSON.stringify(resdata.userInfo)
											}).then(res3 => {
												if (res3.code === 2000) {
													
													//判断用户是否绑定过手机
													getuserinfos({
														openid: resdata.userInfo.openid
													}).then(result => {
														if (result.code === 2000) {
															//赋值
															_self.userInfos.identity = result.data.identity;
															if(result.data.identity_init === 1){
																//打开弹窗
																_self.content = 'center'
																_self.types = 'center';
																_self.showtip = true;
															}else{
																
																//设置缓存
																_self.setUserInfo({
																	user_name: _self.userInfos.user_name,
																	province: _self.userInfos.province,
																	city: _self.userInfos.city,
																	country: _self.userInfos.country,
																	headimgurl: _self.userInfos.headimgurl,
																	openid: _self.userInfos.openid,
																	session_key: _self.userInfos.session_key,
																	identity: _self.userInfos.identity,
																});
																uni.setStorageSync('userInfo', _self.userInfos);
																//跳转页面
																uni.reLaunch({
																	url: `/pages/user/index`
																})
																uni.showToast({
																	title: res.msg,
																	duration: 2000,
																	icon: "none"
																});
																
															}
														}
													})
												}
											})
										}
									})
								})
							},
							fail(e) {
								console.log('errer->', e)
							}
						});
					}
					// #endif

				}
				//#endif

			},
			cancelAuth() {
				store.commit('loginOut')
				uni.switchTab({
					url: '/pages/user/index'
				})
			},
			navTo(type) {
				if (type === '1') {
					uni.navigateTo({
						url: '/pages/signUp/statement1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/signUp/statement2'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 90vw;
		min-height: 147rpx;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-box {
			display: flex;
			flex-direction: column;
			padding: 30rpx;

			.tishi {
				text-align: center;
				font-size: 28rpx;
				line-height: 60rpx;
				margin: 30rpx 0;
			}

			.input-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				height: 100rpx;
				background: #f5f5f5;
				margin-bottom: 40rpx;
				border-radius: 8rpx;
				line-height: 100rpx;
				padding: 0rpx 30rpx;

				.input-pho {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #666;
					padding-left: 20rpx;
				}
			}
		}

		.input-but {
			display: flex;
			border-top: 1rpx solid #f5f5f5;
			height: 100rpx;

			.input-but-l,
			.input-but-r {
				flex: 1;
				text-align: center;
				line-height: 100rpx;
			}

			.input-but-l {
				border-right: 1rpx solid #f5f5f5;
			}
		}

	}



	.login-box {
		height: calc(100vh);
	}

	.bg {
		background: #C0C4CC;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box {
		width: 540upx;
	}

	.box-img {
		width: 100%;
		height: 320upx;
		position: relative;

		.img1 {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
		}

		.img2 {
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 247rpx;
			height: 251rpx;
		}

		.img3 {
			position: absolute;
			top: 170rpx;
			left: 50%;
			font-size: 100rpx;
			transform: translateX(-50%);
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: #fff;
		border-radius: 0 0 18upx 18upx;
		padding: 60upx 0 40upx 0;

		.info_title {
			font-size: 36upx;
			font-weight: 600;
			color: #000;
			letter-spacing: 2upx;
		}

		.info_desc {
			width: 446upx;
			color: #999;
			font-weight: 500;
			font-size: 28upx;
			line-height: 41upx;
			text-align: center;
			padding: 40upx 0;
		}

		.confirm-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 440upx;
			height: 88upx;
			border-radius: 44upx;
			font-size: 32upx;
			color: #fff;
			margin-bottom: 40upx;
			letter-spacing: 2upx;
		}

		.close-btn {
			font-size: 28upx;
			color: #999;
			letter-spacing: 2upx;
		}
	}

	.new_bg {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30%;

		.tip_box {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.content_box {
			width: 510rpx;
			font-size: 32rpx;
			color: #666666;
			line-height: 41rpx;
			text-align: center;
			margin-bottom: 125rpx;
		}

		.new-confirm-btn {
			width: 690rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 40rpx;
			background-color: #02BB6F;
		}

		.new-close-btn {
			width: 690rpx;
			height: 88rpx;
			border: 2rpx solid #DEDEDE;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #999999;
			text-align: center;
			line-height: 88rpx;
			margin-bottom: 30rpx;
		}

		.agree {
			display: flex;
			flex-direction: row;

			.img_box {
				width: 30rpx;
				height: 30rpx;
				margin-right: 9rpx;
				margin-top: 10rpx;
			}

			.text_box {
				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.hoverBtn {
		background-color: #cccccc;
	}
</style>
